import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:videotop/base_view.dart';
import 'package:videotop/model/space_model.dart';
import 'package:videotop/myinfo.dart';
import 'package:videotop/widget/report.dart';
import 'package:videotop/widget/videoonly.dart';
import 'package:provider/provider.dart';
import 'package:video_player/video_player.dart';
import '../mycolor.dart';
import '../screen_service.dart';
import '../util.dart';

class Space extends StatefulWidget {
  final int uid;
  int type;

  Space({this.uid, this.type: 1});

  @override
  _SpaceState createState() {
    SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(statusBarIconBrightness: Brightness.light));
    return _SpaceState();
  }
}

class _SpaceState extends State<Space> {

  @override
  Widget build(BuildContext context) {
    return BaseView<SpaceModel>(
      onModelReady: (model){
        model.getSpace();
      },
      model: SpaceModel(widget.uid,widget.type,Provider.of<MyInfo>(context),Provider.of<Util>(context),context),
      builder: (context,model,child){
        return AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.light,
            child: Scaffold(backgroundColor: Color(0xff3F2C9F), body: body(model,context)));
      },
    );
  }

  Widget body(SpaceModel model, BuildContext context) {
    if (model.isload) {
      return Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  width: 20,
                  height: 20,
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.grey),
                    strokeWidth: 2,
                  ),
                )
              ],
            ),
          ],
        ),
      );
    } else {
      return Container(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    height: ScreenService.height * 0.7 + 50,
                    child: Stack(
                      children: [
                        SwiperWight(model,context),
                        Positioned(
                            right: 20,
                            bottom: 25,
                            child: Visibility(
                              visible: model.type == 1,
                              child: GestureDetector(
                                behavior: HitTestBehavior.opaque,
                                onTap: model.follow,
                                child: Container(
                                    height: 55,
                                    padding:
                                        EdgeInsets.only(left: 15, right: 15),
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular((30)),
                                        color: Color(0xffFFFB01)),
                                    child: Center(
                                        child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Image.asset(
                                          'assets/image/yonghub.png',
                                          width: 25,
                                          height: 25,
                                        ),
                                        SizedBox(
                                          width: 5,
                                        ),
                                        Text(
                                          'Following',
                                          style: TextStyle(
                                              fontFamily: 'my_medium',
                                              color: Colors.black,
                                              fontSize: 15),
                                        ),
                                      ],
                                    ))),
                              ),
                            )),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Container(
                              constraints: BoxConstraints(
                                maxWidth: ScreenService.width / 2,
                              ),
                              child: Text(
                                '${model.user.nickname}',
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 26,
                                    fontFamily: 'my_bold',
                                    color: Colors.white),
                              ),
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Text(
                              '${Provider.of<Util>(context).getAge(DateTime.parse(model.user.birth))}',
                              style: TextStyle(
                                  fontSize: 26,
                                  fontFamily: 'my_bold',
                                  color: Colors.white),
                            ),
                            const SizedBox(
                              width: 5,
                            ),
                            Visibility(
                              visible: model.user.vip != 0,
                              child: Image.asset(
                                'assets/image/vipl.png',
                                width: 30,
                                height: 30,
                              ),),
                            const SizedBox(
                              width: 5,
                            ),
                            Visibility(
                              visible: model.user.verify == 1,
                              child: Image.asset(
                                'assets/image/gou.png',
                                width: 30,
                                height: 30,
                              ),
                            ),
                          ],
                        ),
                        Visibility(
                            visible: model.user.country.isNotEmpty,
                            child: Container(
                              margin: EdgeInsets.only(top: 10),
                              child: Row(
                                children: [
                                  Image.asset(
                                    'assets/image/location.png',
                                    width: 22,
                                    height: 22,
                                    fit: BoxFit.cover,
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  Text(
                                    '${model.user.country}',
                                    style: TextStyle(
                                        fontSize: 15,
                                        color: Colors.white,
                                        fontFamily: 'iconfont'),
                                  ),
                                ],
                              ),
                            )),
                        const SizedBox(
                          height: 12,
                        ),
                        Row(
                          children: [
                            Image.asset(
                              'assets/image/xingzuo.png',
                              width: 20,
                              height: 20,
                              fit: BoxFit.cover,
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Text(
                              '${Provider.of<Util>(context).getConstellation(DateTime.parse(model.user.birth), context)}',
                              style: TextStyle(
                                  fontFamily: 'iconfont',
                                  color: Colors.white,
                                  fontSize: 15),
                            ),
                          ],
                        ),
                        Visibility(
                          visible: model.user.signtext.isNotEmpty,
                          child: signture(model,context),
                        ),
                        const SizedBox(
                          height: 20,
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 20, left: 10, right: 10),
                    padding: EdgeInsets.only(bottom: 80),
                    decoration: BoxDecoration(
                        color: Color(0xff1e154a),
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(10),
                            topLeft: Radius.circular(10))),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 20),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: <Widget>[
                              GestureDetector(
                                behavior: HitTestBehavior.opaque,
                                onTap: () {},
                                child: Container(
                                  child: Column(
                                    children: <Widget>[
                                      Container(
                                        margin: EdgeInsets.only(bottom: 5),
                                        child: Text(
                                          '${model.user.following}',
                                          style: TextStyle(
                                            fontSize: 18,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                      Text(
                                        'Following',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.grey[700]),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              GestureDetector(
                                behavior: HitTestBehavior.opaque,
                                onTap: () {},
                                child: Container(
                                  child: Column(
                                    children: <Widget>[
                                      Container(
                                        margin: EdgeInsets.only(bottom: 5),
                                        child: Text(
                                          '${model.user.followers}',
                                          style: TextStyle(
                                            fontSize: 18,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                      Text(
                                        'Followers',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.grey[700]),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 20, left: 10, right: 10),
                          child: model.user.video.isNotEmpty
                              ? GestureDetector(
                                  onTap: () {
                                    Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                            builder: (contex) => VideoOnley(
                                                video: model.user.video)));
                                  },
                                  child: Visibility(
                                    visible: model.user.video.isNotEmpty,
                                    child: Stack(
                                      children: [
                                        FutureBuilder(
                                          future: model.videoPlayFuture,
                                          builder: (context, value) {
                                            if (value.connectionState ==
                                                ConnectionState.done) {
                                              return Container(
                                                height:
                                                    ScreenService.width * 4 / 9,
                                                width: ScreenService.width / 4,
                                                color: Colors.black,
                                                child: Center(
                                                  child: AspectRatio(
                                                    aspectRatio: model.controller
                                                        .value.aspectRatio,
                                                    child: VideoPlayer(
                                                        model.controller),
                                                  ),
                                                ),
                                              );
                                            } else {
                                              return Container(
                                                color: Colors.black,
                                                height:
                                                    ScreenService.width * 4 / 9,
                                                width: ScreenService.width / 4,
                                                child: Center(
                                                  child: SizedBox(
                                                    height: 20,
                                                    width: 20,
                                                    child:
                                                        CircularProgressIndicator(
                                                      valueColor:
                                                          AlwaysStoppedAnimation<
                                                                  Color>(
                                                              Colors.grey),
                                                      strokeWidth: 2,
                                                    ),
                                                  ),
                                                ),
                                              );
                                            }
                                          },
                                        ),
                                        Container(
                                          height: ScreenService.width * 4 / 9,
                                          width: ScreenService.width / 4,
                                          child: Center(
                                            // alignment: Alignment.center,
                                            child: Image.asset(
                                                'assets/image/ic_playing.png',
                                                height: 50,
                                                width: 50),
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                )
                              : Container(
                                  margin: EdgeInsets.only(top: 50, bottom: 30),
                                  width: ScreenService.width,
                                  child: Text(
                                    '${model.user.nickname} didn\'t post any Moments \nyet',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontSize: 15, color: Colors.grey),
                                  ),
                                ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Positioned(
              top: 40,
              left: 20,
              child: Container(
                width: 40,
                height: 40,
                child: IconButton(
                  icon: Image.asset(
                    'assets/image/back_white.png',
                    width: 27,
                    height: 27,
                    fit: BoxFit.fill,
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
            ),
            Positioned(
              top: 40,
              right: 20,
              child: Container(
                width: 40,
                height: 40,
                child: IconButton(
                  icon: Image.asset(
                    'assets/image/report.png',
                    width: 27,
                    height: 27,
                  ),
                  onPressed: () {
                    reblack(model,context);
                  },
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              child: Container(
                width: MediaQuery.of(context).size.width,
                child: Row(
                  children: [
                    GestureDetector(
                      child: Container(
                        width: MediaQuery.of(context).size.width * 0.45,
                        height: 50,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset(
                              'assets/image/spacemassage.png',
                              width: 20,
                            ),
                            const SizedBox(
                              width: 5,
                            ),
                            Text(
                              'MESSAGES',
                              style: TextStyle(
                                  color: MyColor.theme,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16),
                            ),
                          ],
                        ),
                        color: Colors.white,
                      ),
                      onTap: model.goChat,
                    ),
                    GestureDetector(
                      child: Container(
                        width: MediaQuery.of(context).size.width * 0.55,
                        height: 50,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            model.buildShakeAnimationWidget(),
                            const SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Video Call',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                        color: MyColor.theme,
                      ),
                      onTap: (){
                        model.handleCameraAndMic();
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }
  }

  Widget signture(SpaceModel model, BuildContext context) {
    if (model.user.signtext != '' && model.user.signtext != null) {
      return Container(
          margin: EdgeInsets.only(top: 12),
          child: Row(
            children: [
              Image.asset(
                'assets/image/signtext.png',
                width: 22,
                height: 22,
                fit: BoxFit.cover,
              ),
              const SizedBox(
                width: 10,
              ),
              Expanded(
                child: Text(
                  '${model.user.signtext}',
                  style: TextStyle(
                      color: Colors.white,
                      fontFamily: 'iconfont',
                      fontSize: 12),
                ),
              ),
              const SizedBox(
                width: 10,
              ),
            ],
          ));
    } else {
      return Text('');
    }
  }

  Widget SwiperWight(SpaceModel model, BuildContext context) {
    if (model.img.length != null) {
      return Container(
          height: ScreenService.height * 0.7,
          width: ScreenService.width,
          child: Stack(
            children: [
              new Swiper(
                itemCount: model.img.length,
                scrollDirection: Axis.horizontal,
                controller: model.swipercontroller,
                loop: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return CachedNetworkImage(
                    errorWidget: (context, url, error) => Container(
                      height: ScreenService.height * 0.7,
                      width: ScreenService.width,
                      color: Color(0xff272443),
                      child: Center(
                        child: Image.asset(
                          'assets/image/space_bg.png',
                          width: 200,
                          height: 200,
                        ),
                      ),
                    ),
                    progressIndicatorBuilder: (context, url, error) =>
                        Container(
                      height: ScreenService.height * 0.7,
                      width: ScreenService.width,
                      color: Color(0xff272443),
                      child: Center(
                        child: Image.asset(
                          'assets/image/space_bg.png',
                          width: 200,
                          height: 200,
                        ),
                      ),
                    ),
                    imageUrl: '${model.img[index]}',
                    height: ScreenService.height * 0.7,
                    width: ScreenService.width,
                    fit: BoxFit.cover,
                  );
                },
                pagination: SwiperCustomPagination(
                    builder: (BuildContext context, SwiperPluginConfig config) {
                  return Container(
                    height: 20,
                    margin: EdgeInsets.only(top: 20, left: 7, right: 7),
                    width: ScreenService.width,
                    child: Row(children: model.pubgins),
                  );
                }),
              ),
              Container(
                height: ScreenService.height * 0.7,
                width: ScreenService.width,
                child: Row(
                  children: [
                    Expanded(
                      child: GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          model.pod--;
                          if (model.pod < 0) model.pod = model.img.length - 1;
                          model.swipercontroller.previous();
                          model.getPubgins();
                        },
                        child: Container(
                          color: Colors.transparent,
                        ),
                      ),
                    ),
                    Expanded(
                      child: GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          model.pod++;
                          if (model.pod >= model.img.length) model.pod = 0;
                          model.swipercontroller.next();
                          model.getPubgins();
                        },
                        child: Container(
                          color: Colors.transparent,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ));
    } else {
      return Container();
    }
  }



  reblack(SpaceModel model, BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return new Container(
          height: 101.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  Navigator.pop(context);
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => Report(widget.uid)));
                },
                child: Container(
                  height: 50,
                  alignment: Alignment.center,
                  width: MediaQuery.of(context).size.width,
                  child: Text(
                    'Report',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: 1,
                color: Colors.grey[200],
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: (){
                  model.getBlack();
                },
                child: Container(
                    height: 50,
                    width: MediaQuery.of(context).size.width,
                    child: Center(
                      child: Text(
                        'Block',
                        style: TextStyle(
                            color: Colors.black,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    )),
              )
            ],
          ),
        );
      },
    );
  }

}
